<template>
  <div class="wft-w-h-100">
    <van-checkbox-group 
      v-model="vModelValue"
      :disabled="attrs.disabled"
      :direction="attrs.placement == 'row' ? 'horizontal' : 'vertical'"
      :icon-size="attrs.iconSize"
      :checked-color="attrs.activeColor"
      :shape="attrs.shape == 'circle' ? 'round' : 'square'">
      <van-checkbox 
        v-for="(item, index) in data" 
        :key="index" 
        :name="item[attrs.valueKey]"
      >
        {{ item[attrs.labelKey] }}
      </van-checkbox>
    </van-checkbox-group>
  </div>
</template>
<script setup lang='ts'>
import { useAttrs, useTempValue } from 'generator/hooks'
import { computed, ref, watch } from 'vue';

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const vModelValue = ref([])

const attrs = useAttrs(props.curComp.attrs)

const value = useTempValue(attrs, props.curComp, props.panelJson)

const data = computed(() => {
  const dataInfo = props.panelJson.data.find(item => item.variable == attrs.value.data)
  return dataInfo?.value || getDefDataSource()
})

watch(() => value, () => {
  vModelValue.value = value.value
}, { deep: true, immediate: true })

function getDefDataSource() {
  return [
    {
      id: '0',
      name: '荔枝'
    },
    {
      id: '1',
      name: '橙子'
    },
    {
      id: '2',
      name: '香蕉'
    },
    {
      id: '3',
      name: '草莓'
    }
  ]
}
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>